<template>
  <el-table
    v-loading="loading"
    :data="tableData"
    empty-text
    :cell-style="{ padding: '2px 0', border: 'none' }"
    size="small"
    :header-cell-style="{ background: '#f4f6fa' }"
  >
    <el-table-column label="序号" type="index" :index="1" width="80">
    </el-table-column>
    <el-table-column label="区域名称" min-width="283">
      <template slot-scope="scope">
        <span>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="点位数" min-width="282">
      <template slot-scope="scope">
        <span>{{ scope.row.nodeCount }}</span>
      </template>
    </el-table-column>
    <el-table-column label="备注说明" min-width="282">
      <template slot-scope="scope">
        <span>{{ scope.row.remark }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="200">
      <template slot-scope="scope">
        <el-button type="text" @click="handlePreview(scope.$index, scope.row)"
          >查看详情</el-button
        >
        <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button
        >
        <el-button type="text" @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handlePreview (index, row) {
      this.$emit('handlePreview', index, row)
    },
    handleEdit (index, row) {
      this.$emit('handleEdit', index, row)
    },
    handleDelete (index, row) {
      this.$emit('handleDelete', index, row)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {

    font-size: 14px !important;

    ::v-deep .el-table__header {
      height: 42px;
      .is-leaf.el-table__cell {
        border: none;
      }
    }
    ::v-deep .el-table__row {
      height: 44px;
    }
    ::v-deep .cell {
      color: rgb(102, 102, 102) !important;
      .el-button--text {
        color: #5f84ff;
      }
      .el-button--text:last-child {
        color: #ff5a5a;
      }
    }
    ::v-deep .el-table__body-wrapper.is-scrolling-left {
      overflow-x: hidden !important;
    }
  }
</style>
